<template>
  <div class="top_box">
    <el-input class="top_input" v-model="state.params.idorname" clearable @clear="clearable" placeholder="请输入姓名" />
    <el-input class="top_input" v-model="state.params.mobile" maxlength="11" clearable @clear="clearable"
      placeholder="手机号" />
    <!--  -->
    <el-input class="top_input" clearable @clear="clearable" v-model="state.params.ip" placeholder="输入IP" />

    <!--  -->

    <el-select @clear="clearable" style="margin-left: 10px;" clearable v-model="state.params.addressid" placeholder="请选择点位">
      <el-option v-for="item in state.inodelist" :key="item.id" clearable :label="item.name" :value="item.id" />
    </el-select>

    <div class="m-4" style="margin-left: 10px;" >
      <!-- 级联选择器 -->
      <el-cascader v-model="state.params.depid" :options="state.departmentlistdata" :props="state.SetKesDept" clearable
        @clear="clearable" @change="handleChange" />
    </div>
    <!--  -->
    <el-date-picker style="margin-left: 10px;" @clear="clearable" v-model="state.params.starttime" type="datetime" placeholder="开始时间" />
    <el-date-picker v-model="state.params.endtime" type="datetime" @clear="clearable" placeholder="结束时间" />
    <el-button @click="look" type="primary">查询</el-button>
  </div>
  <div>
    <div class="flex">
      <!-- 添加 -->
      <el-button class="sucess" type="success" @click="add">添加</el-button>
      <el-button type="primary" plain>导出excel</el-button>
    </div>

  </div>
  <div class="table">
    <el-table border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
      :data="state.list" style="width: 100%">
      <el-table-column @click="about" prop="address" label="点位" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="depname" label="部门" />
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="ip" label="IP" />
      <el-table-column prop="addtime" label="时间" />
    </el-table>

  </div>
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15, 20]"
      :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="state.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
import { travel, address, departmentlist } from "../../api/trahectirylist";
import { reactive, ref, toRaw, toRefs } from "vue";

import { useRouter } from "vue-router";
const router = useRouter();

const state = reactive<any>({
  params: { page: 1, pageSize: 10, depid: "" },
  list: [],
  addressid: [],
  inodelist: [],
  total: 0,
  departmentlistdata: [],
  //级联框
  SetKesDept: {
    value: "id",
    label: "name",
    children: "son",
  },
});

const clearable = (val: any) => {
  getlist();
};
//列表
const getlist = async () => {
  const res: any = await travel(state.params);
  // console.log(res);
  if (res.code == 10000) {
    state.total = res.data.total;
    //列表
    state.list = res.data.list;
  }
};
getlist();
// 级联选择器
const handleChange = (value: any) => {
  if (value) {
    let res = value.length - 1;
    state.params.depid = value[res];
  } else {
    getlist();
  }
};
// 获取点位 列表
const addresslist = async () => {
  state.params.pageSize = 1000;
  let res = await address();
  state.inodelist = res.data.list;
  state.params.pageSize = 5;

  // console.log(state.inode)
};
addresslist();

//部门列表
const listdepartmentlist = async () => {
  const res: any = await departmentlist().catch(() => { });
  // console.log(res);
  state.departmentlistdata = res.data[0].son;
};
listdepartmentlist();

//查询
const look = () => {
  getlist();
};
//
const about = () => {
  console.log(123);

  getlist();
};

const value = ref("");
const input = ref("");
const size = ref<"default" | "large" | "small">("default");
const value1 = ref("");
const value2 = ref("");
// 分页
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  state.params.pageSize = val;
  console.log(val);
  getlist();
};
const handleCurrentChange = (val: number) => {
  state.params.page = val;
  getlist();
};
//日期
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
const props = {
  expandTrigger: "hover" as const,
};

//添加
const add = () => {
  router.push("./trahectirylistadd");
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}

.sucess {
  margin: 10px;
}

.demo-pagination-block {
  margin: auto;
  text-align: center;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-pagination-block{
  margin-left: 20px;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.top_box {
  width: 90%;
  display: flex;
  margin-bottom: 10px;
}

.top_input {
  margin-left: 10px;
  width: 150px;
}

.table {
  margin-left: 10px;
}
.el-pagination{
  float: right;
  margin-top: 20px;
}
</style>